<template>
  <div v-if="isload" class="home">
    <div class="home-head" @click="toMine">
      <div class="home-head-left">
        <img :src="user.avatarUrl" class="user-head" />
        <div class="home-head-left-content">
          <div class="user-name">{{ user.nickName }}</div>
          <div class="user-level">{{ user.grade.name }}</div>
        </div>
      </div>
      <img src="../image/icon-right.png" class="home-head-right" />
    </div>

    <div class="home-code">
      <div class="code-left">
        <div class="code-list" @click="toCcode">
          <div class="code-number">{{ user.points }}</div>
          <div class="code-title">总消费积分</div>
        </div>
        <div class="code-list" @click="toEcode">
          <div class="code-number">{{ user.balance }}</div>
          <div class="code-title">可兑换积分</div>
        </div>
      </div>
      <div class="code-withdrawal" @click="toWithdrawal">
        <img src="../image/icon-withdrawal.png" class="withdrawal-pic" />
        <div>提现</div>
      </div>
    </div>

    <div class="sign-main">
      <div class="sign-list-main">
        <div class="sign-list" v-for="(item, name, index) in signArr">
          <div class="sign-date">第{{ index + 1 }}天</div>
          <div class="sign-code" :class="day > index + 1 || item.status ? '' : 'sign-code-active'">+{{ item.integral }}</div>
          <img class="sign-pic" :src="day > index + 1 || item.status ? img2 : img1" />
          <img v-if="item.status" class="success-pic" src="../image/icon-success.png" />
        </div>
      </div>
      <div class="sign-notice">连续签到，能获得更多积分哦</div>
      <div class="sign-btn" :class="sign ? '' : 'sign-btn-active'" @click="signIn">{{ sign ? '签到' : '今日已签到' }}</div>
    </div>

    <div class="home-group">
      <div class="group-list" @click="toCode">
        <img class="group-pic" src="../image/icon-code.png" />
        <div class="group-name">我的推荐码</div>
      </div>
      <div class="group-list" @click="toMteam">
        <img class="group-pic" src="../image/icon-team.png" />
        <div class="group-name">我的团队</div>
      </div>
      <div class="group-list" @click="toSteam">
        <img class="group-pic" src="../image/icon-holder.png" />
        <div class="group-name">积分详情</div>
      </div>
    </div>
    <!--    <img alt="Vue logo" src="../assets/logo.png">-->
    <!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
  </div>
</template>

<script lang="ts">
// @ is an alias to /src
import { Component } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue';
import Sence from '../sence/Sence';

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Sence {
  public user: any = {
    nickName: '',
    grade: { name: '' },
    points: '',
    balance: '',
    avatarUrl: '',
  }; // 用户信息
  public isload: boolean = false; // 视图显示
  public img1: any = require('../image/icon-sign.png'); // 签到图标
  public img2: any = require('../image/icon-sign-no.png'); // 签到过期图标
  public day: number = 1; // 当前星期
  public sign: boolean = true; // 签到锁
  public signArr: any = []; // 签到记录数组
  // public code: any = ""; // 授权code
  public mounted(): void {
    const query = this.GetRequest(window.location.href);
    if ((!localStorage.getItem('third_id') || !localStorage.getItem('token')) && !query.code) {
      this.getCode();
      return;
    }
    setTimeout(() => {
      if (query.code && (!localStorage.getItem('third_id') || !localStorage.getItem('token'))) {
        // this.code=this.$route.query.code;
        this.post('api/wechat/codeLogin', { code: query.code })
          .then((res: any) => {
            localStorage.setItem('third_id', res.data.id);
            localStorage.setItem('referee_mobile', res.data.referee_mobile);
            return this.post('api/user/loginByThirdId', { id: res.data.id });
          })
          .then((result: any) => {
            if (result.data.code == 1) {
              localStorage.setItem('token', result.data.token);
              this.freshUser().then((res: any) => {
                this.user = res;
                this.isload = true;
              });
              this.signList();
              return;
            } else if (result.data.code == -1) {
              this.$router.push('/registe');
               return;
            } else {
              this.$router.push('/login');
              return;
            }
          });
      } else {
        /**
         * 获取用户信息
         */
        this.freshUser().then((res: any) => {
          this.user = res;
          this.isload = true;
        });
        if (localStorage.getItem('token')) {
          this.signList();
        }
      }
    }, 200);
  }

  /**
   * 用户签到记录接口
   */
  public signList(): void {
    const myDate = new Date();
    this.day = myDate.getDay();
    this.post('api/user/signList', {}).then((res: any) => {
      this.signArr = res.data;
      let data = [];
      for (let i in res.data) {
        data.push(res.data[i]);
      }
      if (data[this.day - 1].status) {
        this.sign = false;
      }
    });
  }

  /**
   * 用户签到接口
   */
  public signIn(): void {
    this.post('api/user/signIn', {}).then((res: any) => {
      this.toast('签到成功！');
      this.freshUser().then((res: any) => {
        this.user = res;
      });
      this.signList();
    });
  }

  /**
   * 前往消费积分详情
   */
  public toCcode(): void {
    this.$router.push('/ccode');
  }

  /**
   * 前往兑换积分详情
   */
  public toEcode(): void {
    this.$router.push('/ecode');
  }

  /**
   * 前往个人信息
   */
  public toMine(): void {
    this.$router.push('/mine');
  }

  /**
   * 提现
   */
  public toWithdrawal(): void {
    // this.toast('近期上线！');
    this.$router.push('/withdrawal');
  }

  /**
   * 前往我的团队
   */
  public toMteam(): void {
    this.$router.push('/mteam');
  }

  /**
   * 前往股东团队
   */
  public toSteam(): void {
    // this.toast('近期上线！');
    this.$router.push('/steam');
  }

  /**
   * 前往我的二维码
   */
  public toCode(): void {
    this.$router.push('/code');
  }
}
</script>
<style scoped lang="stylus">
.home-head
    display flex
    flex-direction row
    background #E0CCA8
    justify-content space-between
    padding 8vh 6vw
    align-items center

    .home-head-left
        display flex
        flex-direction row

    .user-head
        border 5px solid white
        width 60px
        height 60px
        border-radius 50px
        overflow hidden

    .home-head-left-content
        margin-left 10px
        display flex
        flex-direction column
        justify-content space-around
        align-items flex-start

        .user-name
            font-size 15px
            font-weight bold

        .user-level
            font-size 13px
            background black
            color white
            border-radius 30px
            padding 4px 10px

    .home-head-right
        width 30px
        height 30px

.home-code
    position relative
    background white
    box-shadow 0 0 10px #ccc
    margin 0 6vw
    height 100px
    border-radius 8px
    top -5vh
    display flex
    flex-direction row
    align-items center

    .code-left
        padding 10px 0
        width 70%
        display flex
        flex-direction row
        justify-content space-around
        border-right 1px solid #ddd

        .code-list
            display flex
            flex-direction column
            align-items center

            .code-number
                font-size 16px
                color #E51C23

            .code-title
                margin-top 5px
                color #515151

    .code-withdrawal
        width 30%
        display: flex
        flex-direction column
        align-items center

        .withdrawal-pic
            width 30px
            height 30px
            margin-bottom 3px


.sign-main
    position relative
    top -1vh
    background white
    box-shadow 0 0 10px #ccc
    padding 6vw

    .sign-list-main
        display flex
        flex-direction row
        justify-content space-around

        .sign-list
            display flex
            flex-direction column
            align-items center
            height 31vw

            .sign-date
                font-size 2vw
                color #515151

            .sign-code
                margin-top 3vw
                font-size 4vw
                color #808080

            .sign-code-active
                color #515151

            .sign-pic
                margin-top 2vw
                width 10vw
                height 10vw

            .success-pic
                margin-top 3vw
                width 7vw
                height 7vw

    .sign-notice
        margin-top 5vw
        font-size 12px
        color #909090
        text-align center

    .sign-btn
        color #515151
        font-weight bold
        margin auto
        margin-top 10px
        width 200px
        height 35px
        line-height 35px
        background #E0CCA8
        text-align center
        border-radius 5px

    .sign-btn-active
        background #909090
        color white

.home-group
    margin-top 20px
    display flex
    flex-direction row
    flex-wrap wrap
    justify-content space-around

.group-list
    display flex
    flex-direction column
    align-items center

.group-pic
    width 35px
    height 35px

.group-name
    margin-top 10px
</style>
